<!DOCTYPE html>
<html>
<head>
<title>首 页</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<base href="<?php echo site_url('')?>">
<link rel="stylesheet" href="css/bone2.css?v=1.4.4">
<link rel="stylesheet" href="css/jquery.percentageloader-0.1.css">
<link rel="stylesheet" href="font/iconfont.css">
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.percentageloader-0.1.min.js"></script>
<script type="text/javascript" src="js/template.js"></script>
<style>
body, section{
  background: #6699FF;
}

.bo-layout-main {
  background: #6699FF;
}

.bo-comment{
  position: relative;
}
.bo-comment .count{
  color:#eee;
  font-size: 38px;
  position: absolute;
  right:20px;
  top:0px;
}

.top{
  background: #6699FF;
  color:#fff;
}

.ana-box{
  background: #fff;
  border-radius: 5px;
  margin: 10px;
  padding: 15px;
    overflow: hidden;
}

.ana-line{
  background: #f2f2f2;
  height: 10px;
  line-height: 10px;
  border-radius: 5px;
    overflow: hidden;
}

.ana-title{
  font-weight: normal;
  font-size: 16px;
  border-left: 2px #eee solid;
  text-align:left;
  padding-left:15px;
  padding-bottom: 10px;
}

.ana-content{
  border-left: 2px #eee solid;
  padding:0 15px;
  margin-bottom:20px;
}

.ana-line .ana-line-per{
  height: 10px;
  float: left;
  border-radius: 5px;
}

.p{text-align: left;padding:10px 0 0 0;font-size: 12px;color:#999;}

.circle-box{
  background: #6699FF;
  width: 230px;
  height: 230px;
  position: relative;
  border-radius: 100%;
  border-right:30px #fff solid;
}

.circle-box .circle{
  position: absolute;
}
.tabs-group {
  display: inline-block;

  border-radius: 2px;
}
.tabs-group .tabs-item {
  display: inline-block;
  border: 0px !important;
  border-radius: 0 !important;
}
.tabs-group .tabs-item-current {
  background: #3492e6;
  color: #fff;
}
.tabs-group-dark {

}
.btn {
  -webkit-appearance: none !important;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
  cursor: pointer;
  padding: 8px 12px;
  border: 0;
  border-radius: 2px;
  line-height: 1em;
  font-size: 14px;
  text-align: center;
  margin: 0;
  color: #444;
  background: #f2f2f2;
  border: 1px #f2f2f2 solid;
}
.btn:hover {
  background: #d9d9d9;
}
.btn i {
  line-height: 1em;
}
.btn-block {
  width: 100%;
}
.btn-primary {
  color: #fff;
  background: #6699FF;

}
.btn-primary:hover {
  background: #1976c9;
  color: #fff;
}
.btn-warm {
  color: #fff;
  background: #FF6633;
  border: 1px #FF6633 solid;
}
.btn-warm:hover {
  background: #fa3e00;
  color: #fff;
}
.btn-comfort {
  color: #fff;
  background: #66CC33;
  border: 1px #66CC33 solid;
}
.btn-comfort:hover {
  background: #509f28;
  color: #fff;
}
.btn-blank {
  color: #444;
  border: 1px #d4d4d4 solid;
  background: none;
}
.btn-blank:hover {
  background: #f2f2f2;
  color: #444;
}
.btn-primary-blank {
  color: #3492e6;
  color: #6699FF;
  border: 1px #3492e6 solid;
  background: #fff;
}

.btn-warm-blank {
  color: #FF6633;
  border: 1px #FF6633 solid;
  background: none;
}

.btn-comfort-blank {
  color: #66CC33;
  border: 1px #66CC33 solid;
  background: #B7D9F0;
}

.btn-icon {
  border: 0;
  background: none;
  color: #d4d4d4;
  font-size: 24px;
  padding: 0;
  vertical-align: center;
}
.btn-icon:hover {
  background: none;
}
.btn-icon-primary {
  border: 0;
  background: none;
  color: #3492e6;
  font-size: 24px;
}
.btn-tiny {
  padding: 2px 6px;
}
.btn-sm {
  padding: 5px 10px;
}
.btn-sm-icon {
  font-size: 17px;
}
.btn-lg {
  padding: 10px 16px;
  font-size: 17px;
}
.btn-lg-icon {
  font-size: 20px;
}
.btn-block {
  width: 100%;
  display: block !important;
}
</style>

<style>
*{margin: 0;padding: 0;}
.box{width:200px;height:190px;margin:10px auto;position:relative;}
.box div{position:absolute;top:0;left:0;border-radius:50%;height:120px;width:120px;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;}
.box .bg{border:none 6px solid}
.box .bg2{border:#fff 6px solid;clip:rect(0px,60px,60px,0);}
.box .rount{border:#6699FF 6px solid;clip:rect(0,100px,200px,0);-webkit-transform:rotate(0deg);}
.box .rount2{border:#6699FF 6px solid;clip:rect(0,200px,200px,100px);-webkit-transform:rotate(0deg);display:none}
.box .num{padding-top: 40px;;text-align:center;color:#fff; z-index:9;}
.points{width:200px;margin:10px auto;text-align: center;}
</style>
</head>
<body id="app">
  <?php
    $startweek = date ("Y-m-d", strtotime ("-7 day"));
    $endweek = date ("Y-m-d", strtotime ("+0 day"));

    $starttoday = date ("Y-m-d", strtotime ("+0 day"));
    $endtoday = date ("Y-m-d", strtotime ("+0 day"));

    $startyesterday = date ("Y-m-d", strtotime ("-1 day"));
    $endyesterday = date ("Y-m-d", strtotime ("-1 day"));
  ?>
  <header class="bo-layout-header  bo-layout-full">
	<div class="bo-header">
		<div class="bo-header-dock-left">
      <a href="<?=site_url('/user')?>"><i class="icon iconfont icon-back"></i></a>
		</div>
    <div class="" style="">
      <div class="tabs-group tabs-group-dark">
        <button class="switcher tabs-item btn btn-sm btn-primary" data-start="<?=$startyesterday?>"  data-end="<?=$endyesterday?>" data-title="昨天">
          昨天
        </button>
        <button class="switcher tabs-item  btn btn-sm btn-primary-blank" data-start="<?=$starttoday?>"  data-end="<?=$endtoday?>" data-title="今天">
          今天
        </button>
        <button class="switcher tabs-item btn btn-sm btn-primary" data-start="<?=$startweek?>"  data-end="<?=$endweek?>" data-title="本周日均">
          一周
        </button>
      </div>
    </div>

 	</div>
</header>
<section class="bo-layout-main  bo-layout-full" id="list">
  <div class="top">
    <div class="box">
    	<div id="loader"></div>

    </div>
    <p style="font-size:11px;color:#B7D9F0">推荐每日摄入能量<span id="energy"></span>千卡</p>
  </div>

  <div class="ana-box" id="ana-box">

  </div>
</section>

<script type="text/html" id="template">
  <h3 class="ana-title" style="border-left-color:#FF0000">蛋白质</h3>
  <div class="ana-content">
    <div class="ana-line">
      <div class="ana-line-per" style="width: {{nutrient.danbaizhi/standard.danbaizhi*100}}%;background:#FF0000">
      </div>
    </div>
    <div class="p">
      {{title}}摄入蛋白质 {{nutrient.danbaizhi}}g，推荐摄入 {{standard.danbaizhi}} g
    </div>
  </div>

  <h3 class="ana-title" style="border-left-color:#FFC600">脂肪</h3>
  <div class="ana-content">
    <div class="ana-line">
      <div class="ana-line-per" style="width: {{nutrient.zhifang/25*100}}%;background:#FFC600">
      </div>
    </div>
    <div class="p">
      {{title}}摄入脂肪 {{nutrient.zhifang}}g <br>建议日摄入量＝公斤体重数×0.45（克）
    </div>
  </div>

  <h3 class="ana-title" style="border-left-color:#6699CC">碳水化合物</h3>
  <div class="ana-content">
    <div class="ana-line">
      <div class="ana-line-per" style="width: {{nutrient.tanshui/standard.tanshui*100}}%;background:#6699CC">
      </div>
    </div>
    <div class="p">
      {{title}}摄入碳水化合物 {{nutrient.tanshui}}g，推荐 {{standard.danbaizhi}} g
    </div>
  </div>
</script>

<script type="text/javascript">

  $('.switcher').click(function(){
    var start = $(this).data('start')
    var end = $(this).data('end')
    $('.switcher').removeClass('btn-primary-blank').addClass('btn-primary')
    $(this).removeClass('btn-primary').addClass('btn-primary-blank')
    var title = $(this).data('title')
    getData(start, end, title)
  })

  function getData (start, end, title){
    $.ajax({
      url: '<?=site_url()?>/user/getNutrient',
      type: 'POST',
      data: {
        startdate: start,
        enddate: end
      },
      success: function(data){
        data.title = title
        draw(data)
      }
    })
  }

  getData('<?=$starttoday?>', '<?=$endtoday?>');

  var $loader  = $("#loader").percentageLoader({
    width : 200,
    height : 200,
    progress : 0
  });


  function draw(data) {

    var totalKb = data.standard.nengliang||0;
    var kb = 0;


    var animateFunc = function() {

      if (kb > totalKb) {
        kb = totalKb;
      }


      $loader.setProgress(kb / totalKb);
      $loader.setValue(data.nutrient.nengliang.toString());
      if (kb < data.nutrient.nengliang) {
        setTimeout(animateFunc, 25);
      }
      kb += 50;
    }
    setTimeout(animateFunc, 25);
    for(var key in data.nutrient){
      data.nutrient[key] = data.nutrient[key]||0
      data.nutrient[key] = parseFloat(data.nutrient[key]).toFixed(2)
      if(key == 'nengliang'){
        data.nutrient[key] = parseFloat(data.nutrient[key]).toFixed(0)
      }
    }
    for(var key in data.standard){
      data.standard[key] = data.standard[key]||0
      data.standard[key] = parseFloat(data.standard[key]).toFixed(0)
    }
    $('#energy').text(data.standard.nengliang||0)
    $('#ana-box').html(template('template', data))
  }

</script>
</body>
</html>
